<template>
	<view class="content">
		<view class="header">
			<view class="title">
				<image style="width: 36rpx; height: 36rpx;" src="../../../static/my/fh.png" mode=""></image>
				<text>下单</text>
			</view>

			<view class="information">
				<view class="information_login">
					<image style="width: 40rpx; height: 40rpx;" src="../../../static/my/detils_dingwei.png" mode="">
					</image>
					<view class="information_login_admin">
						佐藤健 <text
							style="	font-family: PingFang SC-Medium;font-weight: Medium;font-size: 26rpx;color: #333333;">18025468585</text>
					</view>
				</view>
				<view class="information_address">
					河北省石家庄市新乐县新乐县XXXXXX街XXXXX路
				</view>
			</view>

			<view class="freight">
				<view class="freight_left">
					<image src="../../../static/my/goodsimg.png" mode=""></image>
					<text>希点教育</text>
				</view>
				<view class="freight_right">
					<button type="default">运费规则</button>
				</view>
			</view>


			<view class="goods">
				<view class="goods_left">
					<image src="../../../static/my/goodsimg.png" mode=""></image>
				</view>

				<view class="goods_right">
					<view class="goods_right_top">
						<text>新思维早启蒙 情境思维数学 童年教育</text>
					</view>
					<view class="goods_right_ato">
						<text>描述描述</text>
					</view>

					<view class="goods_right_bottom">
						<view class="bottom_left">
							￥<text>9.9</text>
						</view>
						<view class="bottom_right">
							<text @click="reduce()">-</text>
							<view class="mth">
								<text>{{count}}</text>
							</view>
							<text @click="puls()">+</text>
						</view>
					</view>
				</view>
			</view>


			<view class="freight_information">
				<view class="freight_information_list">
					<view class="freight_information_list_left">
						<text>运费</text>
					</view>
					<view class="ifreight_information_list_right">
						<text>XXXXXXXXXX</text>
					</view>
				</view>
				<view class="freight_information_list">
					<view class="freight_information_list_left">
						<text>商品金额累计</text>
					</view>
					<view class="ifreight_information_list_right">
						<text>XXXXXXXXXX</text>
					</view>
				</view>
				<view class="freight_information_list">
					<view class="freight_information_list_left">
						<text>运费累计</text>
					</view>
					<view class="ifreight_information_list_right">
						<text>XXXXXXXXXX</text>
					</view>
				</view>
				<view class="freight_information_bz">
					<view class="freight_information_bztop">
						<text>订单备注：</text>
					</view>
					<view class="freight_information_bzbottom">
						<input type="text" value="" placeholder="请输入你的备注" />
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom_left_yf">
					<view class="bottom_left_yf_tit">
						<text>应付款：</text>
					</view>
					<view class="bottom_left_yf_smb">
						￥<text>304</text>
					</view>
				</view>
				<view class="bottom_right_tj">
					<button type="default">提交订单</button>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 1
			}
		},
		methods: {
			puls() {
				this.count++

				console.log(this.count)
			},
			reduce() {
				this.count--
				console.log(this.count)
			}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background: #F6F6F8;
	}

	.header {
		width: 750rpx;
		height: 320rpx;
		background: #1F8CFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.title {
		display: flex;
		padding-top: 118rpx;
		align-items: center;

	}

	.title image {
		float: left;
		margin-left: 30rpx;
	}

	.title text {
		margin: auto;
		padding-right: 58rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.information {
		width: 690rpx;
		height: 172rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 42rpx auto 0;
	}

	.information_login {
		display: flex;
		padding-top: 34rpx;
		margin-left: 32rpx;
		align-items: center;
	}

	.information_login_admin {
		margin-left: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.information_address {
		margin-left: 32rpx;
		margin-top: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.freight {
		width: 690rpx;
		height: 112rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 32rpx;
		display: flex;
		align-items: center;
	}

	.freight_left {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-left: 32rpx;

	}

	.freight_left image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.freight_right {
		margin-left: auto;
		padding-right: 32rpx;
	}

	.freight_right button {
		width: 176rpx;

		background: #1D8CFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;

	}

	.goods {
		width: 690rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		margin: auto;
	}

	.goods_left {
		margin-left: 32rpx;
	}

	.goods_left image {
		width: 160rpx;
		height: 160rpx;
	}

	.goods_right {
		height: 160rpx;
		margin-left: 16rpx;
	}

	.goods_right_top {
		height: 33%;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;

	}

	.goods_right_ato {
		height: 33%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_right_bottom {
		height: 33%;
		display: flex;
		align-items: center;
	}

	.bottom_left {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;
		line-height: 33rpx;
	}

	.bottom_left text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;
		line-height: 33rpx;
	}

	.bottom_right {
		width: 144rpx;
		height: 64rpx;
		background: #E8E8E8;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-left: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom_right text {
		width: 44rpx;

		display: flex;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #555555;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.mth {
		width: 44rpx;
		height: 44rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
	}

	.freight_information {
		padding-left: 30rpx;
		padding-right: 30rpx;



	}

	.freight_information_list {
		margin-top: 40rpx;
		padding-bottom: 24rpx;
		display: flex;
		border-bottom: 1rpx solid #E3E3E3;
	}

	.freight_information_list_left {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.ifreight_information_list_right {
		margin-left: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.freight_information_bz {

		margin-top: 40rpx;

	}

	.freight_information_bztop {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.freight_information_bzbottom input {
		width: 690rpx;
		height: 144rpx;
		background: #F4F4F4;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.freight_information_bzbottom input ::placeholder {

		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;

	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
	}

	.bottom_left_yf {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.bottom_left_yf_tit {

		font-family: PingFang SC-Medium;
		font-weight: Medium;
		font-size: 28rpx;
		color: #333333;

	}
	.bottom_left_yf_smb {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;
	}

	.bottom_left_yf_smb text {

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;

	}
	.bottom_right_tj{
		margin-left: auto;
		padding-right: 30rpx;
	}
	.bottom_right_tj button{
		background: #1D8CFF;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;

	}
</style>